<template>
	<view class="contentA">
		<view class="flex tit">
			<img :src="detail.image" />{{detail.name}}
		</view>

		<view class="money dis_f_sb_c" v-if="detail.zhangfu < 0">
			<view class="left">
				<view style="font-size: 30rpx">¥</view>
				<view style="font-weight: bold;font-size: 60rpx;">{{detail.price}}</view>
				<view><img class="xs" src="@/assets/xs.png" alt=""></view>
			</view>
			{{detail.zhangfu}}%
		</view>
		<view class="money" v-else style="color: red;">
			<view class="left">
				<view style="font-size: 30rpx">¥</view>
				<view>{{detail.price}}</view>
				<view><img class="xs" src="@/assets/xs.png" alt=""></view>
			</view>
			{{detail.zhangfu}}%
		</view>
		<view class="date">
			<view class="data-item">
				<view>七日最高价
					<text>￥{{detail.max}}</text>
				</view>
				<view>七日最低价
					<text>￥{{detail.min}}</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="data-item">
				<view>七日涨跌
					<text v-if="detail.qirizhangfuprice > 0">+￥{{detail.qirizhangfuprice}}</text>
					<text v-else>￥{{detail.qirizhangfuprice}}</text>
				</view>
				<view>七日涨跌幅
					<text v-if="detail.qirizhangfu > 0">+{{detail.qirizhangfu}}%</text>
					<text v-else>{{detail.qirizhangfu}}%</text>
				</view>
			</view>
		</view>
		<u-gap height="5" bgColor="#F3F3F3"></u-gap>
		<!-- <view class="echartsHeader flex">
      <TagComp
       
        :active="current"
        @change="change"
        :tagList="list"
        bgColor="#fff"
        activeBgColor="#fff"
      />
      <view class="numType">
        <text
          @click="active = item.value"
          v-for="(item, i) in activeList"
          :key="i"
          :class="active === item.value ? 'active' : ''"
        >{{ item.name }}
        </text>
      </view>
    </view> -->
		<!-- <ChartView :line="detail.list" /> -->
		<view class="charts-box">
			<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
		</view>
	</view>
</template>
<script>
	import ChartView from "@/pages/marketHall/components/ChartView.vue";
	import TagComp from "@/components/TagComp.vue";
	export default {
		name: "index",
		components: {
			ChartView,
			TagComp
		},
		props: {
			detail: {
				type: Object
			}
		},
		data() {
			return {
				list: ["24H", "1周", "1月", "1年", "所有"],
				chartData: {},
				opts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: true,
					dataPointShapeType: "hollow",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: true,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 13,
						lineHeight: 20,
						marginTop: 0,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "justify",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "solid",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					yAxis: {
						gridType: "solid",
						dashLength: 2,
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: []
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 13,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						},
					},
				},
				current: 0,
				active: 1,
				activeList: [{
						name: "折线",
						value: 1
					},
					{
						name: "浮动",
						value: 2
					},
				],
			};
		},
		methods: {
			change(val) {
				this.current = val;
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接

					this.chartData = this.detail.list;
					console.log(this.detail)
				}, 500);
			},
		},
		created() {

		},
		mounted() {
			this.getServerData();
		},
	};
</script>
<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 400rpx;
		padding: 20rpx;
	}

	.contentA {
		background-color: #fff;

		.echartsHeader {
			margin: 20rpx;

			.numType {
				width: 186rpx;
				height: 48rpx;
				border-radius: 24rpx;
				background-color: #eaeaea;
				line-height: 48rpx;
				display: flex;

				text {
					flex: 1;
					font-size: 24rpx;
					text-align: center;

					img {
						width: 50rpx;
						height: 30rpx;
					}
				}

				.active {
					background-color: #fff;

					border: 1rpx solid #016fdd;
					border-radius: 24rpx;
					color: #016fdd;
				}
			}
		}

		.date {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #a0a0a0;
			font-size: 28rpx;
			font-weight: 500;
			gap: 20rpx;

			.data-item {
				flex: 1;

				view {
					margin: 10rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						color: #131313;
					}
				}
			}

			.line {
				width: 1px;
				height: 40rpx;
				background: #a0a0a0;
			}
		}

		.tit {
			gap: 20rpx;
			padding: 20rpx;
			align-items: center;

			img {
				width: 30px;
				height: 30px;
				border-radius: 15px;
				font-weight: 500;
			}
		}

		.money {
			font-weight: 500;
			padding: 30rpx 20rpx;
			display: flex;
			align-items: end;
			justify-content: space-between;
			color: #097f56;

			.left {
				align-items: baseline;
				display: flex;
				font-size: 38rpx;
				font-weight: 700;

				.xs {
					width: 24rpx;
					height: 24rpx;
				}

				view {
					font-size: 20px;
				}
			}
		}
	}
</style>